<template>
  <el-popover v-model="visible">
    <cron v-model="cron_" :size="size" @change="change" :width="width" />
    <el-input
      slot="reference"
      v-model="cron_"
      :placeholder="$t('common.inputPlaceholder')"
      :size="size"
    >
      <el-button slot="append" icon="el-icon-refresh" @click="reset" />
    </el-input>
  </el-popover>
</template>

<script>
import Cron from './cron';
import { DEFAULT_CRON_EXPRESSION } from '../constant/filed';
export default {
  name: 'CronInput',
  components: {
    Cron,
  },
  props: {
    value: {
      type: String,
      default: DEFAULT_CRON_EXPRESSION,
    },
    size: {
      type: String,
      default: 'mini',
    },
    width: {
      type: Number,
      default: 700,
    },
  },
  data() {
    return {
      cron_: '',
      visible: false,
    };
  },
  watch: {
    value(val) {
      this.setCron(val);
    },
  },
  created() {
    this.setCron(this.value);
  },
  methods: {
    setCron(newValue) {
      if (!newValue || newValue.trim().length < 11) {
        this.$message.error(this.$t('common.wordNumError'));
        return;
      }
      this.cron_ = newValue;
    },
    change(cron) {
      this.cron_ = cron;
      this.$emit('change', cron);
    },
    reset() {
      this.$emit('reset', this.value);
    },
  },
};
</script>
<style>
.cron-common-cell-div {
  margin-bottom: 8px;
}
.cron-common-cell-symbol {
  color: #67c23a;
}
</style>
